<template>  
    <view class="container">
		<view class="content">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<view class="title">
					<view class="remark">{{item.remark}}</view>
					<view class="score">{{item.created_at}}</view>
				</view>	
				<view class="neirong">{{item.qty}}</view>
				
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
			
		</view>
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
	import textMore from '@/components/text-more';
	import Api from '@/common/api';
    import { mapState } from 'vuex';  
    export default {
		components: {
			textMore
		},
		data(){
			return {
				page: 1,
				size: 15,
				more_data: true,
				loaded:false,
				list: [],
				loadingType: 'more',
				loaded: false,
			}
		},
		
		onLoad(options) {
			this.loadData()
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
			this.loadData()
		},
        computed: {
			...mapState(['hasLogin','userInfo']),
			
		},
        methods: {
			toDetail(){
				
			},
			
			//获取列表
			async loadData() {
				if (!this.more_data) {
					return; //没有数据不请求
				}			
				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}
			
				this.loadingType = 'loading';
				let params = {
					page: this.page,
					size: this.size,
				};
				let data = await Api.apiCall('get', Api.apiName.score_list, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}
			
				setTimeout(() => {
			
					this.list = this.list.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size) {
						this.page++;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'nomore';
						this.more_data = false;
			
					}
			
				}, 600);
			},
			
        }  
    }  
</script>  
<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.content{
		margin:20rpx 20rpx 0rpx 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
	}
	.list-item {
		display: flex;
		border-bottom: 2rpx solid #c4c4c4;
		margin: 0rpx 20rpx;
		.title{
			display: flex;
			padding: 20rpx 0rpx;
			position: relative;
			flex-direction: column;
			flex:1;
		}
		.neirong{
			padding: 20rpx 0rpx;
			margin: 0rpx 30rpx;
			color:#0191FF;
			display: flex;
			align-items: center;
		}
		.remark{
			flex: 1;
			font-size: 32rpx;
			font-weight: 800;
		}
		.score{
			color: #666666;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
	
</style>